<template>
  <el-dialog
    title="积分添加"
    :visible="true"
    custom-class="dialogWrapper"
    :before-close="closeDialog"
    >
    <el-form :model="formData" label-width="110px" ref="ruleForm" :rules="rules">
      <el-form-item label="员工工号" prop="staffNo">
        <el-input v-model.trim="formData.staffNo" auto-complete="off">
          <el-button slot="append" @click="search(formData.staffNo)" icon="el-icon-search"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model.trim="formData.name" readonly="readonly" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="账户剩余积分" prop="usableIntegral">
        <el-input v-model.trim="formData.usableIntegral" readonly="readonly" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="积分添加" prop="rechargeIntegral">
        <el-input v-model.trim="formData.rechargeIntegral" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="info" @click="submit('ruleForm')" :disabled="Subabled">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { seachAccountInfo,createIntegral } from "@/services/staffManager";
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
export default {
  name: "edit-role",
  data () {
    return {
      menus: [],
      list: [],
      userId:"",
      Subabled:false,
      formData: {
        staffNo: "",
        CompanyNo: "",
        rechargeIntegral: "",
        name:"",
        usableIntegral:""
      },
      formFilter:{
        companyNo:""
      },
      menuInfo: [],
      rules: {
        staffNo: [{ required: true, message: "请输入员工工号", trigger: "blur" },
        { min: 1, max: 20, message: '长度在 20个字符以内', trigger: 'blur' }],
        rechargeIntegral: [{ required: true, message: "请输入积分数量", trigger: "blur" },
        { min: 1, max: 20, message: '长度在 20个字符以内', trigger: 'blur' }],
       }
    }
  },
  props: {
    view: {
      type: String,
      default: "add"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    async search(staffNo){
      try {
        let data = await seachAccountInfo({staffNo:staffNo,companyNo:this.formData.companyNo})
        // debugger
        this.formData.name = data.data.name;
        this.formData.usableIntegral = data.data.usableIntegral;
      } catch (e) {
        if (e instanceof RequestError) {
          this.$alert(e.message, '提示', {
            type: 'error',
            confirmButtonText: '确定'
          })
        } else {
          throw e
        }
      }
    },
    submit(formName) {
      this.Subabled = true;
      this.butTimeOut();
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
              await createIntegral({
                staffNo: this.formData.staffNo,
                companyNo: this.formData.companyNo,
                rechargeIntegral: this.formData.rechargeIntegral
              });
              this.$emit("close", true);
              this.$message({
                showClose: true,
                message: "提交成功",
                type: "success"
              });
          } catch (e) {
            if (e instanceof RequestError) {
              this.$alert(e.message, "提示", {
                type: "error",
                confirmButtonText: "确定"
              });
            } else {
              throw e;
            }
          }
        } else {
          return;
        }
      });
    },
    butTimeOut(){
      var serf = this;
      setTimeout(function(){
        serf.Subabled = false;
      },1200)
    }
  },
  mounted() {}
};
</script>
<style scoped>
.dialogWrapper {
  width: 540px;
}
.el-select {
  width: 100%;
}
.el-textarea__inner{
	height: 100px;
	resize:none;
}
</style>
